<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图导航</title>
    <style rel="stylesheet" type="text/css">
        /* 去除正文区域的内外间距：全屏 */
        body{
            margin:0 auto;
            padding: 0;
        }
        #container{
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <!-- 地图呈现容器 -->
    <div id="container"></div>
    <!-- 设置全局变量 密钥 -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "32cf52baf83d9d69b57316dc4fb41866",
        };
    </script>
    <!-- 加载官方地图脚本 key -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=519fe60cbd221fd8282488a90359c22d"></script>
    <!-- 自己的脚本 -->
    <script type="text/javascript">
        // 创建地图对象并初始化
        var map = new AMap.Map("container", {
            zoom: 10, //地图缩放比例
            center: [118.767413, 32.041544], //地图中心点[经度，纬度]
        });
        //设置定位
        function setLocation(lon,lat){
            //重新设置地图的中心点
            map.setZoomAndCenter(18,[lon,lat]);
            //设置当前中心点的标记
            var marker = new AMap.Marker({
                map,
                icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                position:[lon,lat]
            });
            //加入到地图中
            map.add(marker);
            //地图新增插件能力
            map.plugin(['AMap.PlaceSearch'],function(){
                //设置搜索参数
                var options = {
                    map,                   //对应 地图
                    pageSize:4,            // 每页的条数
                    pageIndex:1,           // 当前页
                    extensions:"base"     // 扩展：基本信息
                };
                //创建搜索功能对象
                var MSearch = new AMap.PlaceSearch(options);
                //为地图设置监听：搜索结果处理
                AMap.Event.addListener(MSearch,"complete",(res)=>{
                    // window.travel.alert(JSON.stringify(res))
                    window.travel.receiveNearPlace(JSON.stringify(res.poiList.pois))
                });
                //执行搜索：结果自动标记
                MSearch.searchNearBy("酒店",[lon,lat]);
            });
        }
        //当页面正式加载完毕
        window.onload = function(){
            //调用鸿蒙端，代理注册过来的函数
            window.travel.setCurrentLocation()
        }
    </script>
</body>
</html>